<template>
	<view class="statistic-box">
		<view class="top">
			<view class="title">
				资源化处置场运力统计
			</view>
			<view class="counts">
				(参运总车辆：<text class="count">24辆</text>)
			</view>
		</view>
		<uni-table emptyText="暂无数据">
			<!-- 表头行 -->
			<uni-tr class="head">
				<uni-th align="center">车牌号</uni-th>
				<uni-th align="center">运企</uni-th>
				<uni-th align="center">车辆属性</uni-th>
				<uni-th align="center">所属辖区</uni-th>
				<uni-th align="center">参运趟次</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr class="item" v-for="item in list" :key="item.id">
				<uni-td>
					<view class="td">
						川A12345
					</view>
				</uni-td>
				<uni-td>
					<!-- ellipsis  -->
					<view class="td">建循集团旗下运输企业有限公司</view>
				</uni-td>
				<uni-td>
					<view class="td">内转</view>
				</uni-td>
				<uni-td>
					<view class="td">青羊区</view>
				</uni-td>
				<uni-td>
					<view class="td count">100</view>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 },])
</script>

<style scoped lang="scss">
	.statistic-box {
		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
		}

		.title {
			font-weight: 500;
			color: #0E1624;
		}

		.counts {
			font-size: 24rpx;
			color: $info-color;

		}

		.count {
			color: $primary-color;
		}
	}

	.head {
		color: #0E1624;
		padding: 10rpx 0rpx;
		background-color: #EFF6FE;
	}

	.td {
		// max-width: 80rpx;
		text-align: center;
		white-space: nowrap;

		&.count {
			font-weight: bold;
		}
	}

	.item {
		padding: 10rpx 0rpx;
		border-bottom: 2rpx solid #E0E5EB;
	}
</style>